import BaseView from "../baseView.js";


export default class ShowstudentListView extends BaseView {
  render() {
    $("#showContent").html(
      `
            <h1>学生列表</h1>
            <hr/>
            <table id="showdata" lay-filter="test"></table>

            <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>  
            `
    )
  }
  hander() {
    //加载layui的table模块
    layui.use('table', function () {
      //使用 tabale模块
      var table = layui.table;
      //渲染表格
      table.render({
        //数据在哪里渲染
        elem: '#showdata'
        //数据接口
        , url: '/student/getstudentbypage'
        , page: {
          limit: 3,
          //每页显示的设置
          limits: [3, 6, 9],
        }//开启分页
        //修改layui的默认分页参数
        , request: {
          pageName: 'curPage' //页码的参数名称，默认：page 默认： 1
          , limitName: 'pageSize' //每页数据量的参数名，默认：limit：10
        }

        //修改layui的数据返回格式
        , parseData: function (res) { //res 即为原始返回的数据
          return {
            "code": res.code, //解析接口状态
            "msg": "查询成功", //解析提示文本
            "count": res.tolNum, //解析数据长度 总条数 
            "data": res.datas //解析数据列表  需要显示的数据
          }
        }
        , cols: [[
          //表头 field：对应你返回对象的属性(键名)
          //title：在表格中显示的列名
          { field: 'name', title: '姓名' }
          , { field: 'age', title: "年龄" }
          , { field: 'gender', title: '性别' }
          ,{field:'title', title: '班级', width: 200
          ,templet: function(data){
            console.log(data);
            //得到当前行数据，并拼接成自定义模板
            return data.classId.name
          }
        }
        , { fixed: 'right', title: '操作', toolbar: '#barDemo' }
        ]]
      });

      delAndEdit();
    });
  }
}

function delAndEdit() {
  layui.use(['element', 'form', 'table', 'layer'], function () {
    let { element, form, table, $, layer } = layui;
    table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）


      if (layEvent === 'detail') { //查看

      } else if (layEvent === 'del') { //删除
        layer.confirm('确定删除吗？', function (index) {
          layer.close(index);
          $.ajax({
            type: "delete",
            url: `/student/deletestudent/${data._id}`,
            dataType: "json",
            success: (data) => {
              if (data.code == 0) {
                layer.msg(data.msg)
                table.reload('showdata')
              } else {
                layer.msg(data.msg)
              }
            }
          })
        });
      } else if (layEvent === 'edit') { //编辑
        layer.open({
          title: '编辑',
          type: 1,
          area: ['50%', '50%'],
          content: `<form class="layui-form" >
            <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-inline">
                <input type="text" id="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">年龄</label>
              <div class="layui-input-inline">
                <input type="text" id="age" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
              </div>
            </div>
      
            <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="stuName" id="tel" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:100px">
            </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
              </div>
            </div>
          </form> `,
          btn: ['确定', '取消'],
          yes: function (index, layero) {
            //修改数据
            $.ajax({
              type: "put",
              url: "/student/updatastudent",
              data: {
                stuid: data._id,
                name: $("#name").val(),
                age: $("#age").val(),
                gender: $("input:checked").val(),
                tel: $("#tel").val()
              },
              dataType: "json",
              success: (data) => {

                if (data.code == 0) {
                  layer.msg(data.msg);
                  table.reload('showdata')
                  //跳转到主界面
                  window.location.href = "#/main/studentlist";
                }

              }
            })
            layer.close(index);
          }
          , btn2: function (index, layero) {

          }
        });
        form.render();

        $.ajax({
          type: "get",
          url: `/student/showdeailinfo/${data._id}`,
          dataType: "json",
          success: (data) => {
            console.log(data.result);
            $("#name").val(data.result.name);
            $("#age").val(data.result.age);
            //设置地址
            $("#tel").val(data.result.tel);
            data.result.gender == "男" ? $(":radio[value='男']").attr("checked", true) : $(":radio[value='女']").attr("checked", true)
            form.render();
          }
        })
      }
    });
  }
  )
}
